<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>事件修饰符</title>
        <style>
            .box1{
                width: 400px;
                height: 400px;
                background: skyblue;
            }
            .box2{
                width: 300px;
                height: 300px;
                background: pink;
            }
            .box3{
                width: 200px;
                height: 200px;
                background: orange;
            }

        </style>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="demo">
            <!-- 阻止默认行为 prevent-->
            <!-- <form action="https://www.baidu.com">
                <button @click.prevent="warn">点我开启提醒</button>
            </form> -->

            <!-- 阻止冒泡 stop -->
            <!-- <div class="box1" @click='box1'>
                <div class="box2" @click.stop='box2'>
                    <div class="box3" @click.stop='box3'></div>
                </div>
            </div> -->

            <!-- 只允许点击一次 once -->
            <button @click.once='warn'>点我开启提醒</button>
        </div>
    </body>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#demo',
            methods:{
                // 阻止默认行为
                //#region 
                // 方式一:这里使用点击事件e
                // warn: function(e){
                //     e.preventDefault();
                //     alert('采用点击事件e.preventDefault阻止');
                // }
                 // 方式二:使用事件修饰符阻止
                // warn(){
                //     alert('采用事件修饰符进行阻止')
                // }
                //#endregion

                // 阻止冒泡
                //#region 
                // box1(){
                //     alert('我是box1');
                // },
                // box2(){
                //     alert('我是box2');
                // },
                // box3(){
                //     alert('我是box3');
                // }
                //#endregion

                // 只允许一次
                //#region 
                warn(){
                    alert('只允许点我一次呦!!!');
                }
                //#endregion
            }
        })
    </script>
</html>